const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
        path: __dirname + '/dist',
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "案例-隔行变色",
            template: "./public/index.html"
        }),
        new MiniCssExtractPlugin(), // 提取css为独立文件插件
        // 请确保引入这个插件！
    new VueLoaderPlugin()
    ],
    module: { // 加载器
        rules: [ // 规则数组
            {
                test: /\.vue$/,
                loader: 'vue-loader'
              },
            { // 具体规则
                test: /\.css$/i, // 匹配.css结尾文件(/i忽略大小写)
                // use: 使用哪些加载器来处理这个类型的文件 (右到左用)
                // css-loader: 让webpack可以引入css文件-并打包代码进js中
                // style-loader: 把css插入到dom中
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
            {
                test: /\.less$/i, // 匹配.less结尾文件
                use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"], // 将 Less 文件编译为 CSS 文件 (内部还会用less模块把less代码翻译成css代码)
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/i, // 匹配规则
                use: [
                    {
                        loader: 'url-loader', // url-loader处理上述类型文件
                        options: {
                            limit: 8192, // 8 * 1024
                            // url-loader 把图片转成base64字符串, 打包进js中
                            // 图片大小, 等于或大于limit这个字节, 文件就会交给file-loader处理
                            // file-loader 把图片输出到dist目录下
                        },
                        // 为什么需要写limit限制:
                        // 计算机里的一切文件和文字本质上都是0和1
                        // 图片数据(0和1)转成base64字符串 - 把0和1以另外一种表现形式展示出来
                        // 问题: 图片转成base64字符串, 体积会放大30%
                    }
                ]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/i,
                use: [
                    {
                        loader: "url-loader", // 默认也被打包成base64进js文件中
                        options: {
                            limit: 2 * 1024, // 体积转换标准(1G = 1 * 1024MB)

                            // 针对file-loader生效
                            // [name]占位符, 会使用当前正在打包的文件原名字
                            // [ext]占位符, 文件原扩展名
                            name: '[name].[ext]', // 输出文件的名字
                            outputPath: "fonts/" // 输出到哪里(只针对字体文件生效) - 基于dist/
                        }
                    }
                ]
            },
            {
                test: /\.js$/i, // * 0到多次 + 1到多次 ? 0和1次
                exclude: /(node_modules|bower_components)/, // 排除node_module下的js代码无需降级(你用高版本包, 本身就不支持低版本浏览器, 如果想支持请使用低版本的第三方包)
                // 具体哪些是低的, 等你遇到报错, 百度解决
                // 好处: node_modules下的js文件巨多, 排除也是为了让打包更快
                use: {
                    loader: 'babel-loader', // 使用babel-loader让webpack和babel翻译你的高版本的业务逻辑代码 => 低版本的js代码
                    options: {
                        presets: ['@babel/preset-env'] // 使用这个包的预设规则(哪些语法需要转成什么样子的, 都在这个包里写着规则)
                    }
                }
            }
        ],
    },
    devServer: { // 规定属性(webpack本地开发服务器配置)
        port: 3000, // 端口号3000
        open: true // 自动弹出浏览器
    },

    // 开发写代码
    // mode: "development", // 让webpack以开发模式进行使用
    // devtool: "cheap-module-source-map" // devtool的值就是告诉sourcemap如何记录代码原始位置
    // // 连着loaders记录代码行数, 产生独立的map文件

    // 上线在生产
    mode: "production",
    devtool: "source-map" // 产生独立map文件(记录代码位置信息)


    // 记住: 开发代码的时候用的是webpack-dev-server启动的本地热更新服务器(实时写代码页面更新)
    // vue-cli就是用热更新服务器来观察vue代码写出来的网页 - 调试

    // 写完代码要上线了, 就跟热更新服务器没有一毛钱关系了
    // 把代码打包后输出到磁盘上

    // 结论: yarn serve - 启动开发服务器  (内存打包)
    //       yarn build - 开发完毕把代码打包后放到dist目录 (你只要把dist目录交给后台运维工程师)
}